<template>
  <div class="pay-success tac">
    <div class="top">
      <img src="../../images/pay/icon_chenggong.png" class="icon bdr50"/>
      <div class="title">支付成功</div>
      <div class="subtitle">您已成功购买{{$route.query.name}}~</div>
    </div>
    <div class="bottom">
      <a class="download-btn mb20 mlr-auto vat" :href="curr.link">点击下载APP</a>
      <img class="qrcode" src="../../images/geling_code.jpg">
      <div class="text mlr-auto">长按识别二维码关注公众号</div>
    </div>
  </div>
</template>

<script>
  import {mapMutations, mapGetters} from 'vuex';

  export default {
    name: "PaySuccess",
    computed: {
      ...mapGetters([
        'appList'
      ])
    },
    data(){
      return {
        curr: {},
      }
    },
    created(){
      for(let list of this.appList){
        for(let item of list.list) {
          if(item.pid === +this.$route.query.pid){
            this.curr = item;
            break;
          }
        }
      }
      console.log(this.curr);
    },
  }
</script>

<style scoped lang="less">
  .pay-success {
    min-height: 100vh;
    background-color: #f5f5f5;
  }

  .top {
    margin-bottom: 5.56rem;
    padding: 2.16rem 0 1.94rem;
    background-color: #fff;
    font-size: .88rem;
    line-height: 1;
    color: #888;
    .icon {
      width: 6.5rem;
    }
    .title {
      margin-bottom: .84rem;
      font-size: 1.25rem;
      color: #000;
    }
  }

  .bottom {
    .download-btn {
      display: block;
      width: 12.13rem;
      color: #fff;
      line-height: 2.5;
      background-color: #059ae7;
      border-radius: .5rem;
    }
    .qrcode {
      margin-bottom: 1.09rem;
      width: 9.06rem;
      height: 9.06rem;
    }
    .text {
      width: 12.13rem;
      height: 1.38rem;
      line-height: 1.38rem;
      background-color: #fde9df;
      border-radius: .66rem;
      font-size: .81rem;
      color: #ff8611;
    }
  }

</style>
